<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失地利差</title>
    <script src="https://zwping.gitee.io/cdn/apexcharts.v3.44.0.js"></script>
    <style>
        .l1 {
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <fieldset>
            <legend>基础参数</legend>
            <span class="l1">出生年份: </span><input type="text" id="year" value="1968"><br>
            <span class="l1">失地险/年: </span><input type="text" id="money_gou" value="3500"><br>
            <span class="l1">计算周期/年: </span><input type="text" id="count" value="30"><br>
        </fieldset><br>
        <fieldset>
            <legend>政府下发金额</legend>
            <span class="l1">老年金/月: </span><input type="text" id="money_lao" value="100"><br>
            <span class="l1">失地补偿/月: </span><input type="text" id="money_shi" value="400"><br>
            <span class="l1">失地保险/月: </span><input type="text" id="money_she" value="1200">
        </fieldset><br>
        <fieldset>
            <legend>开始年龄</legend>
            <span class="l1">老年金: </span><input type="text" id="age_lao" value="61"><br>
            <span class="l1">失地补偿: </span><input type="text" id="age_shi" value="61"><br>
            <span class="l1">失地险: </span><input type="text" id="age_she" value="61">
        </fieldset><br>
        <button type="button" id="render">重新渲染</button>
    </div>
    <div id="chart" style="height: 500px;"></div>
</body>
</html>
<script>
    var params = {
        'count'     : 40,
        'cyear'     : (new Date()).getFullYear(),
        'year'      : 1968,     // 出生年份

        'age_lao'   : 61,       // 开始拿老年金的岁数
        'age_shi'   : 61,       // 开始拿失地补偿金的岁数
        'age_she'   : 61,       // 开始失地保险的岁数
        
        'money_lao' : 100,      // 老年金*12月
        'money_shi' : 400,      // 失地补偿金*12月
        'money_she' : 1200,     // 养老社保*12月
        'money_gou' : 3500,     // 购买养老社保的钱*15年
    }
    function getData() {
        params.count = parseInt(document.querySelector('#count').value)
        params.year = parseInt(document.querySelector('#year').value)
        params.age_lao = parseInt(document.querySelector('#age_lao').value)
        params.age_shi = parseInt(document.querySelector('#age_shi').value)
        params.age_she = parseInt(document.querySelector('#age_she').value)
        params.money_lao = parseInt(document.querySelector('#money_lao').value)
        params.money_shi = parseInt(document.querySelector('#money_shi').value)
        params.money_she = parseInt(document.querySelector('#money_she').value)
        params.money_gou = parseInt(document.querySelector('#money_gou').value)
        age = params.cyear - params.year
        console.log(age, params)

        // 年份
        years       = [...Array(params.count).keys()].map(y => params.cyear+y)
        // 年龄
        ages        = years.map(y => y-params.year)
        console.log(years, ages)
        // 老年金
        money_laos  = ages.map(function (it,i) { 
            if (i == 0) return 0
            if (age >= params.age_lao) return i*params.money_lao*12
            return (Math.max(it-params.age_lao+1, 0))*params.money_lao*12
        })
        // 失地补助钱
        money_shis  = ages.map(function (it,i) { 
            if (i == 0) return 0
            if (age >= params.age_shi) return i*params.money_shi*12
            return (Math.max(it-params.age_shi+1, 0))*params.money_shi*12
        })
        // 失地养老购买钱
        money_gous  = years.map((y,i) => (i>15)? 0 : i*params.money_gou)
        gou_total   = Math.max(...money_gous)   // 购买社保的总金额
        // money_shes  = ages.map(age => (age-params.age_she+1)*params.money_she)
        // 失地养老钱
        money_shes  = ages.map((age,i) => (age<params.age_she||i<16) ? 0 : (Math.min(i-15, age-params.age_she+1))*params.money_she*12)

        // 不购失地养老险收益
        money_shis2 = money_shis.map((m, i) => m+money_laos[i])
        // 购买失地养老险收益
        money_shes2 = money_shes.map(m => m==0 ? 0 : m-gou_total)
        // console.log(money_laos, money_shis, money_shis2, money_gous, gou_total, money_shes, money_shes2)
        return [
                {'name': '年龄', 'data': ages},
                {'name': '老年金', 'data': money_laos},
                {'name': '失地补偿', 'data': money_shis},
                {'name': '不购失地保收益', 'data': money_shis2},
                {'name': '失地保购买', 'data': money_gous},
                {'name': '失地保', 'data': money_shes},
                {'name': '购买失地保收益', 'data': money_shes2},
            ];
    }
    var options = {
            chart: {
                height: 500,
                type: 'line'
            },
            stroke: {
                // curve: 'smooth',
            },
            // colors: ['#f0ff54', '#61f9b0', '#00c666', '#00ff83', '#e0e0e0', '#8cbaff', '#0065ff'],
            series: getData(),
            xaxis: {
                categories: years
            }
    }
    var chart = new ApexCharts(document.querySelector("#chart"), options);
    chart.render();
    document.querySelector('#render').onclick = () => {
        chart.updateOptions({
            xaxis: {
                type: 'date',
                categories: [...Array(params.count).keys()].map(y => params.cyear+y),
            }
        })
        chart.updateSeries(getData())
    }

</script>